<script setup lang="ts">
import { CircleCloseFilled } from "@element-plus/icons-vue";


withDefaults(defineProps<{
  curIndex: number
  names: Array<string>
}>(), {
  curIndex: 0
});

const emit = defineEmits<{
  (e: "updateIndex", index: number): void;
  (e: "delete", index: number, name: string): void;
}>();



const onSelect = (selectIndex: number) => {
  emit("updateIndex", selectIndex);
};
const onRemove = (selectIndex: number, name: string) => {
  emit("delete", selectIndex, name);
};

</script>
<template>
  <div class="tab-bar horzontal-center-layout">
    <div v-for="(item, index) in names" :key="index" class="tab-btn horzontal-center-layout"
      :class="{ 'tab-active-btn': curIndex === index }" @click="onSelect(index)">
      <span class="name">{{ item }}</span> <el-icon :size="12" @click.stop="onRemove(index, item)">
        <CircleCloseFilled />
      </el-icon>
    </div>
  </div>

</template>

<style scoped lang="scss">
.tab-bar {
  width: 100%;
  overflow-x: auto;
  height: 33px;

  .tab-btn {
    cursor: pointer;
    height: 100%;
    margin-right: 5px;
    border-radius: 0;
    padding: 5px 15px 6px;
    font-size: 12px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-color: #eaeaea;
    background-color: rgba(240, 240, 240, 0.8);
    color: #515a6e;
    border: 1px solid #eaeaea;

    i {
      --color: #999999 !important;
    }

    .name {
      margin-right: 5px;
    }
  }

  .tab-active-btn {
    background-color: white;
    color: #2F49D0;
    border-bottom: 1px solid white;

    i {
      --color: #2F49D0 !important;
    }

  }

}
</style>